/* 全局样式表 */
html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
  /* 最小宽度设置后，当页面宽度小于这个的时候，为了显示全部页面内容，将自动出现水平滚动条 */
  min-width: 1366px;
}
/* 登录框中的第三方图标样式 */
.login_container {
  .el-form-item__content {
    span.el-input__prefix {
      .iconfont {
        font-size: 20px;
        color: #666666;
      }
    }
  }
}
/* 重置一下卡片视图阴影，多处用到，声明未全局样式，方便复用 */
.el-card.is-always-shadow {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
/* 面包屑导航公共样式 */
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
/* el-table公共样式 */
.el-table.users_table {
  margin-top: 15px;
  font-size: 12px;
  .el-table__body-wrapper {
    .el-table__body {
      .el-table__row {
        & :nth-child(7) {
          .cell {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            > button {
              margin: 0;
            }
          }
        }
      }
    }
  }
}
.el-table.roles_table {
  margin-top: 15px;
  font-size: 12px;
  .el-table__body-wrapper {
    .el-table__body {
      .el-table__row {
        & :nth-child(5) {
          .cell {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 0 20px;
            > button {
              margin: 0;
            }
          }
        }
      }
    }
  }
}
/* 分页框重置继承自el-main的样式line-height,设置一个上边距15px */
.el-pagination {
  /* 不设置高度的话，line-height就是设置了其内容高度 */
  line-height: 30px;
  margin-top: 15px;
}
/* 弹出对话框公共样式 */
/* 弹出对话框样式，放在global.less中复用 */
.el-row {
  line-height: 40px;
}

.el-dialog__wrapper {
  line-height: 40px;
  .el-dialog__header {
    text-align: left;
    font-size: 16px;
  }
  .el-dialog__body {
    padding: 0 20px;
    > p {
      text-align: left;
    }
  }
}
/* 权限列表组件中表头样式 */
.el-card {
  .el-card__body {
    line-height: 0;
    .el-table__header-wrapper {
      .el-table__header {
        line-height: 0 !important;
      }
    }
  }
}
/* card组件第一行的按钮 */
.el-card {
  .el-card__body {
    .el-row {
      .el-button {
        margin-left: 0;
        margin-right: auto;
      }
    }
  }
}
/* 隐藏级联选择器选项前的单选框，声明未全局样式才生效.配合 elCascaderOnlick方法操作DOM实现 */
// .el-radio {
//   color: #606266;
//   cursor: pointer;
//   visibility: hidden; // 加上这一行
//   margin-right: 30px;
// }
/* 纯css实现 */
.el-cascader-panel {
  .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    /* 单选框高度16px,父盒子高度34px,top:9px;可以使得隐藏的单选框垂直居中 */
    .el-radio__input {
      top: 9px;
      visibility: hidden;
    }
  }
  .el-cascader-node__label {
    width: 134px;
  }
  .el-cascader-node__postfix {
    top: 10px;
  }
}

.el-cascader-menu {
  height: 300px;
}

/* 步骤条样式 */
.el-steps.el-steps--horizontal {
  margin: 15px 0;
  .el-step__title {
    font-size: 13px;
  }
}
/* form表单中标签和input占据两行时，设置标签左对齐，更改默认标签居中的效果 */
.el-form--label-top .el-form-item__label {
  float: left;
}
/*  x-placement='top-start'表示 级联选择框弹出框从上方开始，可以与其他级联选择框相区别*/
div[x-placement='top-start'] {
  top: 425px !important;
}
/* 富文本编辑器 编辑区高度 */
.quill-editor {
  .ql-container {
    /*注意：是给ql-editor添加高度，而不是给其子元素p添加最小高度，因为富文本编辑器中每写一行内容，
    自动在DOM树中添加一个子元素p,设置p的高度，行与行之间会产生
    巨大的空白 
     */
    .ql-editor {
      min-height: 300px;
    }
  }
}
